<template>
  <div class="hardwareInfo-page">
    <div class="info-box">
      <i class="iconfont icon-icon_cpu"></i>
      <!-- <i class="iconfont icon-icon_cpu"></i> -->
      <!-- <img src="../assets/images/cpu.png" alt=""> -->
      <span class="span-left">CPU使用:</span><span class="span-right">{{currentCpuUse}}%</span>
    </div>
    <div class="info-box">
      <i class="iconfont icon-neicun"></i>
      <!-- <img src="../assets/images/memory.png" alt=""> -->
      <span class="span-left">内存使用:</span><span class="span-right">{{currentMemoryUse}}%</span>
    </div>
    <div class="info-box">
      <i class="iconfont icon-yingpan"></i>
      <!-- <img src="../assets/images/hd.png" alt=""> -->
      <span class="span-left">硬盘使用:</span><span class="span-right">{{currentHdUse}}%</span>
    </div>
    <div class="info-box">
      <i class="iconfont icon-wendujithermometer31"></i>
      <!-- <img src="../assets/images/temp.png" alt=""> -->
      <span class="span-left">CPU温度:</span><span class="span-right">{{currentTemp}}℃</span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props:['hostId','currentItemIndex'],
  data() {
    return {
      temp:[],
      memory:[],
      theInterval:null,
      currentMemory:0,
      currentTemp:0,
      currentCpu:0,
      currentHd:0
    }
  },
  components: {

  },
  created () {
    var _this=this;
    this.getCpuTemp();
    // this.getMemory();
    // this.getHd();
    // this.getCpuInfo();
    this.theInterval=setInterval(()=>{
      // console.log(this.$store.state.cpuTotalArray)
      try{
        _this.getCpuTemp();
        // _this.getMemory();
        // _this.getCpuInfo();
      }catch(err){
        console.log(err);
      }
    },60000)
  },
  destroyed () {
    clearInterval(this.theInterval);
  },
  computed: {
    currentHdUse(){
      return this.$store.state.diskTotalArray[this.currentItemIndex]
    },
    currentMemoryUse(){
      return this.$store.state.memoryTotalArray[this.currentItemIndex]
    },
    currentCpuUse(){
      return this.$store.state.cpuTotalArray[this.currentItemIndex]
    }
  },
  methods: {
    getDatas(obj){
      var _this=this;
      var data={
        "jsonrpc": "2.0",
        "method": "item.get",
        "params": {
            "output": "extend",
            "hostids": this.hostId,
            "search": obj,
            "sortfield": "name"
        },
        "auth": localStorage.getItem('auth'),
        "id": localStorage.getItem('currentId')
      }
      return new Promise((resolve,reject)=>{
        _this.$http.post('/zabbix/api_jsonrpc.php',data).then(
          res=>{
            resolve(res.result);
          },
          err=>{
            reject('获取数据失败，请检查网络状况，或稍后刷新页面..')
          }
        )
      })
    },
    async getCpuTemp(){
      var _this=this;
      this.temp=[];
      var res=await this.getDatas({"key_":"temp"});
      res.forEach(v=>{
        _this.temp.push({
          lastValue:v.lastvalue,
          units:v.units
        })
      })
      this.currentTemp=parseInt(this.temp[0].lastValue);
      // console.log('this.currentTemp>>>',this.currentTemp)
    },
    // async getMemory(){
    //   var _this=this;
    //   _this.memory=[];
    //   var res=await this.getDatas({"key_":"memory"});
    //   // console.log('要观察的内存',res)
    //   res.forEach(v=>{
    //     _this.memory.push({
    //       name:v.name,
    //       value:v.lastvalue
    //     })
    //   })
    //   //_this.memory[0].value为当前内存使用    _this.memory[1].value为总共内存
    //   if(_this.memory[1].value=='0'){
    //     _this.currentMemory=0
    //   }else{
    //     _this.currentMemory=parseInt((_this.memory[0].value/_this.memory[1].value)*100);
    //   }
    // },
    // async getHd(){
    //   var _this=this;
    //   var res=await this.getDatas({"name":"disk"});
    //   var arr=[];
    //   arr=res.filter((v)=>{
    //     return v.units=='%'
    //   });
    //   var count=0;
    //   arr.forEach(v=>{
    //     count+=parseFloat(v.lastvalue);
    //   })
    //   this.currentHd=parseInt(100-count/arr.length)
    // },
    // async getCpuInfo(){
    //   var _this=this;
    //   var res=await this.getDatas({"key_": "system.cpu"});
    //   var arr=[];
    //   arr=res.filter((v)=>{
    //     return (v.units=='%')
    //   })
    //   var count=0;
    //   arr.forEach(v=>{
    //       count+=parseFloat(v.lastvalue);
    //     }
    //   );
    //   this.currentCpu=parseInt(count/arr.length)
    // }
  }
}
</script>

<style scoped lang='scss'>
.hardwareInfo-page{
  width: 100%;
  height: 140px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;

  .info-box{
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;

    .iconfont{
      font-size: 32px;
      color: #00e3ff;
    }

    .span-left{
      margin-left: 5px;
      font-size: 16px;
      color: #00e3ff;
      font-weight: 700;
    }

    .span-right{
      margin-left: 5px;
      font-size: 26px;
      color: #fff;
      font-weight: 700;
    }
  }
}
</style>
